<template>
    <div class="sideMenu">
        <!-- <div class="parentList" 
            v-for="(item,index) in list"
            :key="index"
        >
            <div class="parentTitle"  @click="openClose(index)">
                <div>
                    <img style="margin-top:3px;width:30px;height:30px" :src="item.imgUrl" alt="">
                </div>
                <div :class="{'color1':index===0,'color2':index===1,'color3':index===2,'color4':index===3}">{{item.name}}</div>
                <div :class="{'color1':index===0,'color2':index===1,'color3':index===2,'color4':index===3}">{{item.value}}</div>
            </div>
            <div class="child" v-show="item.isOpen"> 
                <div class="childList" 
                    v-for="(item1,index1) of item.child"
                    :key="index1"
                    :class="{'childActive':item1.isActive}"
                    @click="childHandleClick(item1.name,index1)"
                >
                    {{item1.name}}
                    {{item1.value}}
                </div>
            </div>
        </div> -->
        <el-menu
            :uniqueOpened="true"
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSelect"
            background-color="rgba(26,83,117,.4)"
            text-color="#fff"
            :active-text-color="currentColor"
        >
            <el-submenu
                v-for="(item, index) in list"
                :key="index"
                :index="index + '1'"
            >
                <template #title>
                    <i
                        :class="item.icon"
                        style="color: rgba(8, 199, 241, 1)"
                    ></i>
                    <span>
                        {{ item.name }}
                        {{ item.value }}
                    </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item
                        v-for="(item1, index1) in item.child"
                        :key="index1"
                        :index="index + '-' + index1"
                        @click="childHandleClick(item1.name, index1)"
                    >
                        {{ item1.name }}
                        {{ item1.value }}
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref,
    inject,
    reactive,
    toRefs,
    nextTick,
} from "vue";
import { useStore } from "vuex";
import { get } from "../../util/request";
import axios from "axios";
//输出的必须是proxy才对
export default {
    setup() {
        const store = useStore();
        let models = reactive({});
        let list = reactive([
            {
                name: "自然灾害类",
                value: "0",
                isOpen: true,
                imgUrl: "/data/images/sjhj/自然灾害.png",
                icon: "el-icon-light-rain",
                child: [],
            },
            {
                name: "安全生产类",
                value: "0",
                isOpen: false,
                imgUrl: "/data/images/sjhj/安全生产.png",
                icon: "el-icon-office-building",
                child: [],
            },
            {
                name: "应急救援类",
                value: "0",
                isOpen: false,
                imgUrl: "/data/images/sjhj/应急救援.png",
                icon: "el-icon-truck",
                child: [],
            },
            {
                name: "事件接报类",
                value: "0",
                isOpen: false,
                imgUrl: "/data/images/sjhj/事件接报.png",
                icon: "el-icon-notebook-2",
                child: [],
            },
        ]);
        let currIndex = ref(false);
        let centerState = ref(false);
        let currentColor = ref("#ffd04b");
        list.forEach((item, index) => {
            reactive(item);
        });
        function openClose(index) {
            list[index].isOpen = !list[index].isOpen;
            list.forEach((item, index1) => {
                if (index1 !== index) {
                    item.isOpen = false;
                }
            });
        }
        function removeZiran() {
            if (document.getElementById("zaihaiInfo")) {
                css3Renderer.remove("zaihaiInfo");
            }
            layerManager.pointPrimitive.removeAll();
            viewer.entities.removeById("dizhendai");
            viewer.entities.removeById("dizhendaiqiang");
            layerManager.polymerizationRemove();
        }
        // let loadingInstance = null;
        function childHandleClick(name, item) {
            centerState.value = !centerState.value;
            if (centerState.value) {
                store.commit("changeSjhjCenterState", name);

                if (name == "学校") {
                    store.commit("changeSjhjCenterShow", false);

                    // loadingInstance = ElLoading.service({
                    //     lock: true,
                    //     text: '数据加载中',
                    //     spinner: 'el-icon-loading',
                    //     background: 'rgba(0, 0, 0, 0.7)'
                    // })
                    get(`/api/aggregation/findXx`).then((res) => {
                        nextTick(() => {
                            // loadingInstance.close();
                        });
                        //layerManager.polymerization(res,'/data/images/earth/local1.png')
                        layerManager.addPointLonLat(
                            res,
                            "#ffff00",
                            name,
                            "leftClick",
                            clickHandle
                        );
                    });
                } else {
                    store.commit("changeSjhjCenterShow", centerState.value);
                }
                currentColor.value = "#ffd04b";
            } else {
                store.commit("changeSjhjCenterShow", centerState.value);
                currentColor.value = "#fff";
                layerManager.removeAll();
            }
        }
        function clickHandleNoModel(id) {
            if (document.getElementById("zaihaiInfo")) {
                css3Renderer.remove("zaihaiInfo");
            }
            let ids = id.item;
            let type = id.dataType;
            let idArr = Object.keys(ids);
            let idArr1 = idArr.filter((item) => {
                return typeof ids[item] !== "object";
            });
            let htmlStr = `${idArr1
                .map(function (item, index) {
                    return `<tr>
                    <td style="border:1px solid #155e75">${item}</td>
                    <td style="border:1px solid #155e75" >${ids[item]}</td>
                </tr>`;
                })
                .join("")}`;
            css3Renderer.append({
                id: "zaihaiInfo",
                position: [ids.lon, ids.lat, 10],
                element: `
                    <div class='ysc-dynamic-layer ys-css3-box' id='zaihaiInfo'>
                        <div class='line'></div>
                        <div class='mainTable'>
                            <div class="tableTitle">${type}</div>
                            <table border="5" style="
                            width: 100%;
                            line-height: 20px;
                            text-align: center;
                            border-color: #155e75;
                            border-collapse: collapse;">
                                ${htmlStr}
                            </table>
                        </div>
                    </div>
                `,
                offset: [10, -250],
            });
        }
        function clickHandle(id) {
            if (document.getElementById("zaihaiInfo")) {
                css3Renderer.remove("zaihaiInfo");
            }
            let ids = id.item;
            let type = id.dataType;
            let idArr = Object.keys(ids);
            let idArr1 = idArr.filter((item) => {
                return typeof ids[item] !== "object";
            });
            let modelObj = {};
            for (let key in models) {
                if (key.toString().indexOf(type) > -1) {
                    modelObj = models[key].properties;
                }
            }
            let idArr2 = idArr1.filter((item) => {
                return modelObj.hasOwnProperty(item);
            });

            let htmlStr = `${idArr2
                .map(function (item, index) {
                    return `<tr>
                        <td style="border:1px solid #155e75">${modelObj[item].description}</td>
                        <td style="border:1px solid #155e75" >${ids[item]}</td>
                    </tr>`;
                })
                .join("")}`;
            // let htmlStr = `${idArr1.map(function (item, index) {
            //     return `<tr>
            //         <td>${item}</td>
            //         <td >${ids[item]}</td>
            //     </tr>`;
            // }).join('')}`;
            css3Renderer.append({
                id: "zaihaiInfo",
                position: [ids.lon, ids.lat, 10],
                element: `
                        <div class='ysc-dynamic-layer ys-css3-box' id='zaihaiInfo'>
                            <div class='line'></div>
                            <div class='mainTable'>
                                <div class="tableTitle">${type}</div>
                                <table border="5" style="
                                width: 100%;
                                line-height: 20px;
                                text-align: center;
                                border-color: #155e75;
                                border-collapse: collapse;">
                                    ${htmlStr}
                                </table>
                            </div>
                        </div>
                    `,
                offset: [10, -250],
            });
        }
        onMounted(() => {
            //自然灾害分类及数量
            get("/api/pandect/risk/countAll").then((res) => {
                list[0].child = res.data;
                list[0].value = res.data.reduce(function (sum, number) {
                    //sum2 前两个数的和
                    return sum + number.value;
                }, 0);
                list[0].child.forEach((item) => {
                    item.isActive = false;
                });
            });
            //安全生产类分类及数量
            get("/api/pandect/safety/countAll").then((res) => {
                list[1].child = res.data;
                list[1].value = res.data.reduce(function (sum, number) {
                    //sum2 前两个数的和
                    return sum + number.value;
                }, 0);
                list[1].child.forEach((item) => {
                    item.isActive = false;
                });
            });
            //应急救援类
            Promise.all([
                get("/api/aggregation/countRbMaterial"),
                get("/api/aggregation/countRescueForce"),
                get("/api/aggregation/findXx"),
            ]).then((res) => {
                let value1 = Object.keys(res[0]).reduce(function (sum, number) {
                    //sum2 前两个数的和
                    return sum + res[0][number];
                }, 0);
                let value2 = Object.keys(res[1]).reduce(function (sum, number) {
                    //sum2 前两个数的和
                    return sum + res[1][number];
                }, 0);
                let value3 = res[2].length;
                list[2].value = value1 + value2 + value3;
                list[2].child = [
                    { name: "应急物资", value: value1 },
                    { name: "救援力量", value: value2 },
                    { name: "学校", value: value3 },
                ];
            });
            axios.get("./data/api-docs.json").then((res) => {
                models = res.data.definitions;
            });
            // get("/api/aggregation/countRbMaterial").then((res)=>{
            //     list[2].child = res.data
            //     list[2].value =res.data.reduce(function(sum,number){ //sum2 前两个数的和
            //         return sum + number.value;
            //     }, 0 )
            // })

            // get("/api/pandect/risk/countAll").then((res)=>{
            //     list[0].child = res.data
            // })
            // get("/api/pandect/risk/countAll").then((res)=>{
            //     list[0].child = res.data
            // })
        });
        function handleOpen(key, keyPath) {}
        function handleClose(key, keyPath) {}
        function handleSelect(key, keyPath) {}
        return {
            list,
            currIndex,
            openClose,
            childHandleClick,
            centerState,
            handleOpen,
            handleClose,
            handleSelect,
            currentColor,
        };
    },
};
</script>
<style >
.sideMenu .el-submenu__title:focus,
.sideMenu .el-submenu__title:hover {
    background: rgba(26, 83, 117, 0.9) !important;
}
.sideMenu .el-menu-item:focus,
.sideMenu .el-menu-item:hover {
    background: rgba(26, 83, 117, 0.9) !important;
}
.sideMenu .el-menu {
    border: none !important;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .sideMenu {
        position: absolute;
        right: vw(422);
        top: vh(128);
        width: vw(200);
        cursor: pointer;
        z-index: 3;

        .parentList {
            .parentTitle {
                width: vw(182);
                height: vh(50);
                line-height: vh(50);
                border: 1px solid #115178;
                background: rgba(10, 43, 60, 0.6);
                margin-top: vh(12);
                text-align: center;
                display: flex;
                justify-content: space-around;

                .color1 {
                    color: rgba(8, 199, 241, 1);
                }

                .color2 {
                    color: rgba(254, 175, 38, 1);
                }

                .color3 {
                    color: rgba(189, 86, 255, 1);
                }

                .color4 {
                    color: rgba(13, 222, 121, 1);
                }

                div:nth-child(2) {
                    font-size: vw(14);
                }

                div:nth-child(3) {
                    font-size: vw(22);
                }
            }

            .active {
                background: url('/data/images/sjhj/reca.png') no-repeat;
                background-size: 100% 100%;
            }

            .child {
                .childList {
                    width: vw(132);
                    height: vh(41);
                    margin-left: vw(50);
                    line-height: vh(41);
                    border: 1px solid #ddd;
                    margin-top: vh(5);
                    text-align: center;
                    background: rgba(10, 43, 60, 0.6);
                    border: 1px solid #115178;
                    font-size: vw(12);
                    transition: color 0.25s;
                }

                .childList::before, .childList::after {
                    border: 2px solid transparent;
                    width: 0;
                    height: 0;
                }

                .childList::before {
                    top: 0;
                    left: 0;
                }

                .childList::after {
                    bottom: 0;
                    right: 0;
                }

                .childList:hover {
                    color: #60daaa;
                }

                .childList:hover::before, .childList:hover::after {
                    width: 100%;
                    height: 100%;
                }

                .childList:hover::before {
                    border-top-color: #60daaa;
                    border-right-color: #60daaa;
                    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
                }

                .childList:hover::after {
                    border-bottom-color: #60daaa;
                    border-left-color: #60daaa;
                    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
                }

                // .childList:hover{
                // background:rgba(8,199,241,1)
                // }
                .childActive {
                    color: #81d2f8;
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .sideMenu {
        position: absolute;
        right: vw1(980);
        top: vh(128);
        width: vw1(200);
        cursor: pointer;
        z-index: 3;

        .parentList {
            .parentTitle {
                width: vw1(182);
                height: vh(50);
                line-height: vh(50);
                border: 1px solid #115178;
                background: rgba(10, 43, 60, 0.6);
                margin-top: vh(12);
                text-align: center;
                display: flex;
                justify-content: space-around;

                .color1 {
                    color: rgba(8, 199, 241, 1);
                }

                .color2 {
                    color: rgba(254, 175, 38, 1);
                }

                .color3 {
                    color: rgba(189, 86, 255, 1);
                }

                .color4 {
                    color: rgba(13, 222, 121, 1);
                }

                div:nth-child(2) {
                    font-size: vw1(14);
                }

                div:nth-child(3) {
                    font-size: vw1(22);
                }
            }

            .active {
                background: url('/data/images/sjhj/reca.png') no-repeat;
                background-size: 100% 100%;
            }

            .child {
                .childList {
                    width: vw1(132);
                    height: vh(41);
                    margin-left: vw1(50);
                    line-height: vh(41);
                    border: 1px solid #ddd;
                    margin-top: vh(5);
                    text-align: center;
                    background: rgba(10, 43, 60, 0.6);
                    border: 1px solid #115178;
                    font-size: vw1(12);
                    transition: color 0.25s;
                }

                .childList::before, .childList::after {
                    border: 2px solid transparent;
                    width: 0;
                    height: 0;
                }

                .childList::before {
                    top: 0;
                    left: 0;
                }

                .childList::after {
                    bottom: 0;
                    right: 0;
                }

                .childList:hover {
                    color: #60daaa;
                }

                .childList:hover::before, .childList:hover::after {
                    width: 100%;
                    height: 100%;
                }

                .childList:hover::before {
                    border-top-color: #60daaa;
                    border-right-color: #60daaa;
                    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
                }

                .childList:hover::after {
                    border-bottom-color: #60daaa;
                    border-left-color: #60daaa;
                    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
                }

                // .childList:hover{
                // background:rgba(8,199,241,1)
                // }
                .childActive {
                    color: #81d2f8;
                }
            }
        }
    }
}
</style>